<script setup lang="ts">
  import { HMessage, HMessageBox } from '@/components/common/message'
  import HeaderWarrantyPolicy from './Header.vue'
  import TableWarrantyPolicy from './Table.vue'
  import Pagination from '@/components/Pagination/index.vue'
  import {
    useGetWarrantyPolicys,
    useGoodWarrantyPolicyListDelete,
    useGoodWarrantyPolicyListEnable,
    useGoodWarrantyPolicyListDisable,
    useGoodWarrantyPolicyListMobileShow,
    useGoodWarrantyPolicyListMobileHide,
  } from '@/services/pages/good/warrantyPolicy'
  import { computed, nextTick, ref } from 'vue'
  import infoTip from '@/config/info-tip'
  import { ElMessageBox } from 'element-plus'

  const {
    total,
    warrantyPolicyList,
    getWarrantyPolicysParam,
    getWarrantyPolicysLoading,
    getWarrantyPolicys,
  } = useGetWarrantyPolicys()
  const { warrantyPolicyListDelete } = useGoodWarrantyPolicyListDelete()
  const { warrantyPolicyListEnable } = useGoodWarrantyPolicyListEnable()
  const { warrantyPolicyListDisable } = useGoodWarrantyPolicyListDisable()
  const { warrantyPolicyListMobileShow } = useGoodWarrantyPolicyListMobileShow()
  const { warrantyPolicyListMobileHide } = useGoodWarrantyPolicyListMobileHide()

  defineOptions({
    name: 'WarrantyPolicy',
  })

  // 分页组件实例
  const paginationInstance = ref<InstanceType<typeof Pagination> | null>(null)

  // 保修政策表格组件实例
  const tableWarrantyPolicyInstance = ref<InstanceType<typeof TableWarrantyPolicy> | null>(null)

  // 选中的保修政策列表
  const selectedWarrantyPolicyIds = computed(() => {
    if (tableWarrantyPolicyInstance.value) {
      return tableWarrantyPolicyInstance.value.selectedWarrantyPolicyIds
    }
    return []
  })

  /**
   * 搜索
   * @param keyword
   */
  const handleSearch = (keyword: string) => {
    getWarrantyPolicysParam.value.name = keyword
    getList()
  }

  /**
   * 获取列表方法
   */
  const getList = () => {
    nextTick(() => {
      if (paginationInstance.value) {
        getWarrantyPolicysParam.value.page = paginationInstance.value.current
        getWarrantyPolicysParam.value.limit = paginationInstance.value.size
        getWarrantyPolicys()
      }
    })
  }

  /**
   * 批量操作
   * @param {'delete' | 'enable' | 'disable' | 'mobileShow' | 'mobileHide'} type - 操作类型
   */
  const onMultipleOperate = (
    type: 'delete' | 'enable' | 'disable' | 'mobileShow' | 'mobileHide',
  ) => {
    if (selectedWarrantyPolicyIds.value.length <= 0) {
      HMessageBox.error(infoTip.good.warrantyPolicy.selectionsNoData)
      return
    }

    const messageOption = {
      delete: infoTip.good.warrantyPolicy.deleteByIds,
      enable: infoTip.good.warrantyPolicy.enableByIds,
      disable: infoTip.good.warrantyPolicy.disableByIds,
      mobileShow: infoTip.good.warrantyPolicy.mobileShowByIds,
      mobileHide: infoTip.good.warrantyPolicy.mobileHideByIds,
    }

    ElMessageBox({
      title: '提示',
      message: messageOption[type],
      type: type === 'delete' ? 'error' : 'warning',
      showCancelButton: true,
      cancelButtonText: '取消',
      async beforeClose(action, instance, done) {
        if (['close', 'cancel'].includes(action)) {
          done()
        }

        if (action === 'confirm') {
          instance.confirmButtonLoading = true
          instance.cancelButtonLoading = true
          let res: APIResponse | null = null
          switch (type) {
            case 'delete':
              res = await warrantyPolicyListDelete(selectedWarrantyPolicyIds.value)
              break
            case 'enable':
              res = await warrantyPolicyListEnable(selectedWarrantyPolicyIds.value)
              break
            case 'disable':
              res = await warrantyPolicyListDisable(selectedWarrantyPolicyIds.value)
              break
            case 'mobileShow':
              res = await warrantyPolicyListMobileShow(selectedWarrantyPolicyIds.value)
              break
            case 'mobileHide':
              res = await warrantyPolicyListMobileHide(selectedWarrantyPolicyIds.value)
              break
          }
          instance.cancelButtonLoading = false
          instance.confirmButtonLoading = false
          if (res) {
            if (res.code === 20000) {
              const successOption = {
                delete: infoTip.good.warrantyPolicy.deleteSuccess,
                enable: infoTip.good.warrantyPolicy.enableSuccess,
                disable: infoTip.good.warrantyPolicy.disableSuccess,
                mobileShow: infoTip.good.warrantyPolicy.mobileShowSuccess,
                mobileHide: infoTip.good.warrantyPolicy.mobileHideSuccess,
              }
              HMessage.success(successOption[type])
              done()
              getList()
              return
            }

            HMessageBox.error(res.message)
            return
          }
          HMessageBox.error(infoTip.service.error)
        }
      },
    })
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div class="warranty-policy" v-loading="getWarrantyPolicysLoading">
    <header-warranty-policy
      :selection="selectedWarrantyPolicyIds"
      @search="handleSearch"
      @multiple-delete="onMultipleOperate('delete')"
      @multiple-enable="onMultipleOperate('enable')"
      @multiple-disable="onMultipleOperate('disable')"
      @multiple-mobile-show="onMultipleOperate('mobileShow')"
      @multiple-mobile-hide="onMultipleOperate('mobileHide')"
    ></header-warranty-policy>
    <div class="table">
      <table-warranty-policy
        :warranty-policy-list="warrantyPolicyList"
        ref="tableWarrantyPolicyInstance"
        @update="getList"
      ></table-warranty-policy>
    </div>
    <div class="pagination">
      <Pagination :list_total="total" ref="paginationInstance"></Pagination>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .warranty-policy {
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 5px;

    .pagination {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
